<template>
  <div class="main">
    <div class="maintop">
      <div class="mtl">
        <div class="mtl_t">
          <div class="mtl_t_l">
            <el-card class="mtl_t_l_card">
              <div class="tit1">快捷方式 - 新建流程</div>
              <div class="tit2">小小文字说明</div>
              <div class="kuaijie">
                <div class="kuaijie_box">
                  <div class="kuaijie_box_c" @click="$router.push({path: '/create-embodiment'})">
                    <img src="../../assets/images/shishiIcon.png">
                    <div>新建实施方案</div>
                  </div>
                </div>
                <div class="kuaijie_box">
                  <div class="kuaijie_box_c" @click="$router.push({path: '/create-designing'})">
                    <img src="../../assets/images/shejiIcon.png">
                    <div>新建设计方案</div>
                  </div>
                </div>
                <div class="kuaijie_box">
                  <div class="kuaijie_box_c" @click="$router.push({path: '/create-bidding'})">
                    <img src="../../assets/images/zhaotoubiaoIcon.png">
                    <div>新建招投标方案</div>
                  </div>
                </div>
                <div class="kuaijie_box">
                  <div class="kuaijie_box_c">
                    <img src="../../assets/images/shishiIcon.png">
                    <div>新建某某方案</div>
                  </div>
                </div>
                <div class="kuaijie_box">
                  <div class="kuaijie_box_c">
                    <img src="../../assets/images/shishiIcon.png">
                    <div>新建某某方案</div>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
          <div class="mtl_t_r">
            <el-card class="mtl_t_r_card">
              <div class="tit1">任务管理</div>
              <div class="tit2">小小文字说明</div>
              <div class="renwu">
                <div class="renwu_box" v-for="item in renwuList" :key="item.id">
                  <div class="renwu_box_icon">
                    <img src="../../assets/images/renwuIcon.png">
                  </div>
                  <div class="renwu_box_tit" :title="item.title" @click="cmdCheck(item.id)">{{item.title}}</div>
                </div>
              </div>
            </el-card>
          </div>
        </div>
        <div class="mtl_b">
          <el-tabs type="border-card" class="mtl_b_card" @tab-click="curTab">
            <el-tab-pane label="用户管理">
              <span slot="label"><span class="tabtit">我的待办(3)</span></span>
              <div class="tab_content">
                我的待办
              </div>
            </el-tab-pane>
            <!-- <el-tab-pane>
              <span slot="label"><span class="tabtit">我的发起(3)</span></span>
              我的发起
            </el-tab-pane>
            <el-tab-pane>
              <span slot="label"><span class="tabtit">流程进度(1)</span></span>
              流程进度
            </el-tab-pane> -->
          </el-tabs>
        </div>
      </div>
      <div class="mtr">
        <div class="weather_box">
          <div class="wb_l">
            <div class="wb_l_s">
              <div class="days">{{getCurDays}}</div>
              <div class="weeks">{{getCurWeek}}</div>
            </div>
          </div>
          <div class="wb_r">
            <div class="wb_i">
              <img :src="iconSrc" slot="reference" />
            </div>
            <div class="wb_c">
              <div class="wb_c_tit">{{getCurTime}}</div>
              <div class="wb_c_tit">江西南昌</div>
              <div class="wb_c_tit">{{weatherData.weather}} {{weatherData.temperature}}℃</div>
            </div>
          </div>
        </div>
        <div class="notice">
          <div class="notice_n">
            <span>通知</span>
          </div>
          <div class="notice_m">
            <span @click="noticeMore">更多 ></span>
          </div>
        </div>
        <el-card class="notice_card">
          <div class="notice_item" v-for="item in noticeList" :key="item.id">
            <div class="notice_item_tit">
              <span :title="item.title" @click="noticeDetail(item.id)">{{item.title}}</span>
            </div>
            <div class="notice_item_time">{{item.time}}</div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="mainbottom">
      <div class="mb_l">
        <div class="mb_l_1">
          <el-card class="mb_l_1_card">
            <TaskProgress></TaskProgress>
          </el-card>
        </div>
        <div class="mb_l_2">
          <el-card class="mb_l_2_card">
            <TaskOverview></TaskOverview>
          </el-card>
        </div>
      </div>
      <div class="mb_r">
        <el-card class="mb_r_card">
          <TaskFinish></TaskFinish>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import TaskProgress from './echart/task-progress.vue'
import TaskOverview from './echart/task-overview.vue'
import TaskFinish from './echart/task-finish.vue'
export default {
  components: {
    TaskProgress,
    TaskOverview,
    TaskFinish
  },
  data () {
    return {
      renwuList: [
        { id: 1, title: '任务一' },
        { id: 2, title: '任务二' },
        { id: 3, title: '任务三' },
        { id: 4, title: '任务四' },
      ],
      noticeList: [
        { id: 1, title: '国庆放假安排', time: '2020-09-26' },
        { id: 2, title: '关于进一步加强新冠肺炎疫情防控工作的紧急通知', time: '2020-11-30' },
        { id: 3, title: '公积金中个人部分每月扣，在年底12月清缴时统一扣！！！（没有缴纳的忽略这条信息）', time: '2020-12-01' },
        { id: 4, title: '合同审批成功通知', time: '2020-09-26' },
      ],
      getCurDays: '',
      weatherData: {},
      iconSrc: '',
    }
  },
  computed: {
    getCurWeek () {
      let n = new Date().getDay()
      let arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      function curDays (n) {
        return arr[n]
      }
      return curDays(n)
    },
    getCurTime () {
      let y = new Date().getFullYear()
      let m = new Date().getMonth() + 1
      return y + '年' + m + '月'
    }
  },
  created () {
    this.getCurDays = new Date().getDate()
    this.getWeather()
  },
  methods: {
    cmdCheck (id) {
      console.log(id)
    },
    // 获取高德天气
    getWeather () {
      this.$axios
        .get(
          'https://restapi.amap.com/v3/weather/weatherInfo?key=1eb5466e06a3cd67339151e44e3d9d11&city=360100',
          {
            transformRequest: [
              function (data1, headers) {
                //这个请求不需要请求头(在此处删除，上方设置的请求头。)
                if (headers.common.Authorization) {
                  delete headers.common.Authorization
                }
                return data1
              },
            ],
          }
        )
        .then((res) => {
          // console.log(res)
          if (res.status == 200) {
            if (res.data.infocode == 10000) {
              this.weatherData = res.data.lives[0]
              this.weatherIcon()
            } else {
              this.$message.error(res.data.info)
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    curTab () {

    },
    noticeMore () {

    },
    noticeDetail (id) {

    },
    // 天气图标
    weatherIcon () {
      let w = this.weatherData.weather
      if (w == '晴') {
        this.iconSrc = require('../../assets/weather/qing.png')
      } else if (w == '少云' || w == '晴间多云' || w == '多云') {
        this.iconSrc = require('../../assets/weather/duoyun.png')
      } else if (w == '阴') {
        this.iconSrc = require('../../assets/weather/yin.png')
      } else if (
        w == '有风' ||
        w == '平静' ||
        w == '微风' ||
        w == '和风' ||
        w == '清风'
      ) {
        this.iconSrc = require('../../assets/weather/feng.png')
      } else if (
        w == '强风/劲风' ||
        w == '强风/劲风' ||
        w == '疾风' ||
        w == '大风' ||
        w == '烈风'
      ) {
        this.iconSrc = require('../../assets/weather/dafeng.png')
      } else if (
        w == '风暴' ||
        w == '狂爆风' ||
        w == '飓风' ||
        w == '热带风暴'
      ) {
        this.iconSrc = require('../../assets/weather/fengbao.png')
      } else if (w == '霾' || w == '中度霾' || w == '重度霾' || w == '严重霾') {
        this.iconSrc = require('../../assets/weather/wumai.png')
      } else if (
        w == '雨' ||
        w == '小雨' ||
        w == '中雨' ||
        w == '大雨' ||
        w == '小雨-中雨' ||
        w == '中雨-大雨' ||
        w == '大雨-暴雨' ||
        w == '毛毛雨/细雨'
      ) {
        this.iconSrc = require('../../assets/weather/yu.png')
      } else if (
        w == '阵雨' ||
        w == '雷阵雨' ||
        w == '雷阵雨并伴有冰雹' ||
        w == '强阵雨' ||
        w == '强雷阵雨'
      ) {
        this.iconSrc = require('../../assets/weather/leizhenyu.png')
      } else if (
        w == '暴雨-大暴雨' ||
        w == '大暴雨-特大暴雨' ||
        w == '暴雨' ||
        w == '大暴雨' ||
        w == '特大暴雨'
      ) {
        this.iconSrc = require('../../assets/weather/baoyu.png')
      } else if (w == '雨雪天气' || w == '雨夹雪' || w == '阵雨夹雪') {
        this.iconSrc = require('../../assets/weather/yuxue.png')
      } else if (w == '冻雨') {
        this.iconSrc = require('../../assets/weather/dongyu.png')
      } else if (
        w == '雪' ||
        w == '阵雪' ||
        w == '小雪' ||
        w == '中雪' ||
        w == '大雪' ||
        w == '暴雪' ||
        w == '小雪-中雪' ||
        w == '中雪-大雪' ||
        w == '大雪-暴雪'
      ) {
        this.iconSrc = require('../../assets/weather/xue.png')
      } else if (
        w == '浮尘' ||
        w == '扬沙' ||
        w == '沙尘暴' ||
        w == '强沙尘暴'
      ) {
        this.iconSrc = require('../../assets/weather/shachenbao.png')
      } else if (w == '龙卷风') {
        this.iconSrc = require('../../assets/weather/longjuanfeng.png')
      } else if (
        w == '雾' ||
        w == '浓雾' ||
        w == '强浓雾' ||
        w == '轻雾' ||
        w == '大雾' ||
        w == '特强浓雾'
      ) {
        this.iconSrc = require('../../assets/weather/shachenbao.png')
      } else {
        this.iconSrc = require('../../assets/weather/weizhi.png')
      }
    },
  }
}
</script>
<style scoped lang="less">
.main {
  width: 100%;
  min-width: 980px;
}
.maintop {
  width: 100%;
  height: 497px;
  display: flex;
  .mtl {
    flex: 2;
    width: 100%;
    .mtl_t {
      width: 100%;
      height: 280px;
      display: flex;
      .mtl_t_l {
        width: 50%;
        .mtl_t_l_card {
          width: 100%;
          height: 100%;
          .kuaijie {
            width: 100%;
            height: 170px;
            margin-top: 15px;
            display: flex;
            flex-wrap: wrap;
            .kuaijie_box {
              margin-top: 5px;
              width: calc(100% / 3);
              height: 85px;
              .kuaijie_box_c {
                text-align: center;
                cursor: pointer;
              }
              .kuaijie_box_c div {
                color: #888888;
                font-size: 15px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
            .kuaijie_box:hover {
              text-decoration: underline;
            }
          }
        }
      }
      .mtl_t_r {
        width: 50%;
        margin-left: 15px;
        .mtl_t_r_card {
          width: 100%;
          height: 100%;
          .renwu {
            width: 100%;
            height: 170px;
            margin-top: 15px;
            .renwu_box {
              height: 42px;
              display: flex;
              .renwu_box_icon {
                width: 10%;
                height: 42px;
                display: flex;
                justify-content: center;
                align-items: center;
              }
              .renwu_box_icon img {
                display: inline-block;
                width: 40px;
                height: 40px;
              }
              .renwu_box_tit {
                width: 90%;
                height: 42px;
                line-height: 40px;
                margin-left: 20px;
                // white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                cursor: pointer;
              }
              .renwu_box_tit:hover {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
    .mtl_b {
      width: 100%;
      height: 200px;
      margin-top: 15px;
      .mtl_b_card {
        width: 100%;
        height: 100%;
        .tabtit {
          font-weight: bold;
          color: #1f3f6d;
          width: 300px;
        }
        .tab_content {
          width: 100%;
          height: 135px;
          // background: red;
        }
      }
    }
  }
  .mtr {
    flex: 1;
    width: 100%;
    margin-left: 15px;
    .weather_box {
      width: 100%;
      height: 141px;
      background: url('../../assets/images/w_bg.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      .wb_l {
        width: 30%;
        .wb_l_s {
          width: 67px;
          height: 122px;
          background: url('../../assets/images/w_s.png');
          margin: auto;
          text-align: center;
          overflow: hidden;
        }
        .days {
          margin-top: 10px;
          color: #ffffff;
          font-size: 39px;
          font-weight: bold;
        }
        .weeks {
          color: #ffffff;
          font-size: 17px;
        }
      }
      .wb_r {
        width: 70%;
        display: flex;
        justify-content: flex-end;
        .wb_i {
          width: 60px;
          height: 141px;
          img {
            width: 60px;
            height: 60px;
            padding-top: 10px;
          }
        }
        .wb_c {
          width: 106px;
          height: 141px;
          padding-top: 10px;
          margin-right: 15px;
          text-align: right;
          .wb_c_tit {
            color: #ffffff;
            font-size: 17px;
            margin-top: 10px;
          }
        }
      }
    }
    .notice {
      width: 100%;
      height: 58px;
      display: flex;
      .notice_n {
        width: 80%;
        height: 58px;
        padding-left: 20px;
      }
      .notice_n span {
        font-size: 20px;
        font-weight: bold;
        line-height: 58px;
        color: #1f3f6d;
      }
      .notice_m {
        width: 20%;
        height: 58px;
        color: #888888;
        text-align: center;
        line-height: 58px;
      }
      .notice_m span {
        cursor: pointer;
      }
    }
    .notice_card {
      width: 100%;
      height: 297px;
      .notice_item {
        width: 100%;
        height: 50px;
        display: flex;
        overflow: hidden;
        .notice_item_tit {
          width: 75%;
          height: 50px;
          line-height: 50px;
          // white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .notice_item_tit span {
          cursor: pointer;
        }
        .notice_item_tit span:hover {
          text-decoration: underline;
        }
        .notice_item_time {
          width: 25%;
          height: 50px;
          text-align: center;
          line-height: 50px;
        }
      }
    }
  }
}
.mainbottom {
  width: 100%;
  height: 350px;
  margin-top: 15px;
  display: flex;
  .mb_l {
    flex: 2;
    height: 350px;
    display: flex;
    .mb_l_1 {
      flex: 1;
      height: 350px;
      .mb_l_1_card {
        width: 100%;
        height: 100%;
      }
    }
    .mb_l_2 {
      flex: 2;
      height: 350px;
      margin-left: 15px;
      .mb_l_2_card {
        width: 100%;
        height: 100%;
      }
    }
  }
  .mb_r {
    flex: 1;
    height: 350px;
    margin-left: 15px;
    .mb_r_card {
      width: 100%;
      height: 100%;
    }
  }
}
.tit1 {
  font-size: 20px;
  font-weight: bold;
  color: #1f3f6d;
}
.tit2 {
  font-size: 15px;
  color: #999999;
  margin-top: 15px;
}
/deep/ .el-tabs__header .el-tabs__item {
  width: 150px;
}
</style>